$(function(){

    // 记录当前页和页码
    var currentPage = 1;
    var pageSize = 5;

    function render(){
        $.ajax({
            url: "/product/queryProductDetailList",
            data: {
                page: currentPage,
                pageSize: pageSize
            },
            dataType: "json",
            success: function(result){
                // 将数据动态渲染到页面
                $("tbody").html(template("temp-product",result));
                // 动态生成分页
                setPage(result.total);
            }
        });
    }
    render();

    // 动态生成分页
    function setPage(total){
        $("#paginator").bootstrapPaginator({
            bootstrapMajorVersion: 3,//默认是2，如果是bootstrap3版本，这个参数必填
            currentPage: currentPage,//当前页
            totalPages: Math.ceil(total / pageSize),//总页数
            onPageClicked: function (event, originalEvent, type, page) {
                // 记录当前访问的页码
                currentPage = page;
                // 重新渲染每一页
                render();
            }

        });
    }

    // // 记录当前id和状态
    // var currentId = null;
    // var isDelete = null;
    // // 点击按钮获取当前点击id
    // $("tbody").on("click",".btn-click",function(){
    //     currentId = $(this).parent().data("id");
    //     isDelete = $(this).hasClass("btn-danger") ? 1 : 0;
    // });

    // 动态生成二级分类列表
    $.ajax({
        url: "/category/querySecondCategoryPaging",
        data: {
            page: 1,
            pageSize: 100
        },
        dataType: "json",
        success: function(result){
            $(".product-list").html(template("temp-cate",result));
        }
    });

    // 点击二级分类下拉列表填充数据并将选中的id赋值给隐藏域
    $(".product-list").on("click","a",function(){
        // 选中下拉列表的数据进行填充
        $(".caret-title").text($(this).text());
        // 将选中的数据id赋值给隐藏域
        $('[name="brandId"]').val($(this).data("id"));
        // 当选中二级分类将状态修改为验证通过
        $("#form1").data("bootstrapValidator").updateStatus("brandId", "VALID");
    });

    // 表单验证
    $("#form1").bootstrapValidator({
        //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
        excluded: [],

        //2. 指定校验时的图标显示，默认是bootstrap风格
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            // 二级分类
            brandId: {
                validators: {
                    notEmpty: {
                        message: "请选择二级分类"
                    }
                }
            },
            // 商品分类
            proName: {
                validators: {
                    notEmpty: {
                        message: "请输入商品名称"
                    }
                }
            },
            // 商品描述
            proDesc: {
                validators: {
                    notEmpty: {
                        message: "请输入商品描述"
                    }
                }
            },
            // 商品库存
            num: {
                validators: {
                    notEmpty: {
                        message: "请输入商品库存"
                    },
                    //正则校验
                    regexp: {
                        //要验证正则表达式
                        regexp: /^[1-9]\d*$/,
                        message: '商品库存必须是非零开头数字！'
                    }
                }
            },
            // 商品尺码
            size: {
                validators: {
                    notEmpty: {
                        message: "请输入商品尺码"
                    }
                },
                //正则校验
                regexp: {
                    regexp: /^[1-9]\d{1}-[1-9]\d{1}$/,
                    message: '商品尺码必须是 xx-xx格式， x是数字'
                }
            },
            // 商品原价
            oldPrice: {
                validators: {
                    notEmpty: {
                        message: "请输入商品原价"
                    }
                }
            },
            // 商品现价
            price: {
                validators: {
                    notEmpty: {
                        message: "请输入商品现价"
                    }
                }
            },
            picStatus: {
                validators: {
                    notEmpty: {
                        message: "请上传3张图片"
                    }
                }
            }
        }
    });

    // 定义一个空数组保存图片的路径
    var arr = [];

    // 上传商品图片
    $("#fileupload").fileupload({
        dataType: "json",
        //e：事件对象
        //data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
        done: function (e, data) {
            // 将图片地址存放到空数组中
            arr.unshift(data.result);
            // 显示盒子中的图片并且从开头开始
            $(".pic-box").prepend('<img src="'+data.result.picAddr+'" height="100">');
            // 判断上传的图片数量是否大于3
            if(arr.length > 3){
                // 删除最后一个
                arr.pop();
                // 删除页面图片父容器中的最后一个图片
                $(".pic-box img:last-child").remove();
            }
            // 判断数组的长度是否==3,如果是就讲验证提示修改为验证通过
            if(arr.length == 3){
                $("#form1").data("bootstrapValidator").updateStatus("picStatus", "VALID");
            }
        }
    });

    // 当表单验证通过, 触发success.form.bv事件, 使用ajax提交表单数据
    $("#form1").on("success.form.bv",function(e){
        // 阻止表单默认提交
        e.preventDefault();
        // 处理数据
        var str = $("#form1").serialize();
        // 将arr数组中的数据转成json字符串拼接在str后面
        str += "&" + "picArr=" + JSON.stringify(arr);
        console.log(str);
        // 使用ajax提交数据
        $.ajax({
            url: "/product/addProduct",
            type: "post",
            data: str,
            dataType: "json",
            success: function(result){
                if(result.success){
                    // 渲染当前页
                    currentPage = 1;
                    render();
                    // 隐藏模态框
                    $(".modal-add").modal("hide");
                    // 清空表单数据
                    $("#form1").data("bootstrapValidator").resetForm(true);
                    // 手动清空二级分类以及图片
                    $(".caret-title").text("请选择二级分类");
                    $(".pic-box").empty();
                }
            }
        });
    });
});